<template>

    <h3 class="text-center">home</h3>
    <div>
       <table class="table  table-striped table-hovered ">
      <tbody>
      <tr v-for="item in list" :key="item.id">
        <td>{{item.id}}</td> <td>{{item.title}}</td> <td>{{item.price}}</td> 
        <td >
        <img :src="item.src" style="height:50px">
        </td>                                                                                
         <td><button @click="add(item)" class="btn btn-success">加入购物车</button></td>
      </tr>
      </tbody>                 
       </table>
    </div>            

</template>

<script setup>
    import {useShopStore} from "../store/store";                     
    import {storeToRefs} from 'pinia'
    const shopStore = useShopStore();
    const {list} =storeToRefs(shopStore);
    const add = (item)=>{
            shopStore.setCatrs(item)
    }
  
</script>

<style scoped>

</style>